<template>
  <treeselect
    :normalizer="normalizer"
    :no-children-text="noChildrenText"
    :no-options-text="noOptionsText"
    :no-results-text="noResultsText"
    :clear-all-text="clearAllText"
    :clear-value-text="clearValueText"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'TreeSelect',
  components: {
    Treeselect
  },
  props: {
    idKey: {
      type: String,
      default: 'code'
    },
    labelKey: {
      type: String,
      default: 'title'
    },
    childrenKey: {
      type: String,
      default: 'children'
    }
  },
  data() {
    return {
      clearAllText: '清除所有值', // clear all
      clearValueText: '清除值', // claer value
      noChildrenText: '没有子节点.', // 当分支节点没有子节点时显示的文本。
      noOptionsText: '没有可用选项.', // 没有可用选项时显示的文本。
      noResultsText: '没有匹配的搜索结果...' // 没有匹配的搜索结果时显示的文本。
    }
  },
  methods: {
    normalizer(node) {
      // 去掉children=[]的children属性
      if (node[this.childrenKey] && !node[this.childrenKey].length) {
        delete node[this.childrenKey]
      }
      return {
        id: node[this.idKey],
        label: node[this.labelKey],
        children: node[this.childrenKey]
        // children: node[this.childrenKey] ? node[this.childrenKey] : []
        // isDisabled: !(node[this.childrenKey] === undefined || node[this.childrenKey] === null || node[this.childrenKey].length === 0)
      }
    }
  }
}
</script>
